<!doctype html>
<!--[if lt IE 7]> <html class="lt-ie9 lt-ie8 lt-ie7" lang="en-US"> <![endif]-->
<!--[if IE 7]>    <html class="lt-ie9 lt-ie8" lang="en-US"> <![endif]-->
<!--[if IE 8]>    <html class="lt-ie9" lang="en-US"> <![endif]-->
<!--[if gt IE 8]><!--> <html lang="en-US"> <!--<![endif]-->
<head>
    <!-- META TAGS -->
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Knowledge Base Theme</title>


    <!-- Style Sheet-->
    <link rel="stylesheet" href="style.css"/>
    <link rel='stylesheet' id='bootstrap-css-css'  href='css/bootstrap5152.css?ver=1.0' type='text/css' media='all' />
    <link rel='stylesheet' id='responsive-css-css'  href='css/responsive5152.css?ver=1.0' type='text/css' media='all' />
    <link rel='stylesheet' id='pretty-photo-css-css'  href='js/prettyphoto/prettyPhotoaeb9.css?ver=3.1.4' type='text/css' media='all' />
    <link rel='stylesheet' id='main-css-css'  href='css/main5152.css?ver=1.0' type='text/css' media='all' />
    <link rel='stylesheet' id='custom-css-css'  href='css/custom5152.html?ver=1.0' type='text/css' media='all' />
    <link rel='stylesheet' href="css/no-show.css" />

    <!-- HTML5 shim, for IE6-8 support of HTML5 elements -->
    <!--[if lt IE 9]>
    <script src="js/html5.js"></script></script>
    <![endif]-->


</head>

<body>
<div id="kuan" v-cloak>
    <div class="header-wrapper">

        <div class="container">


            <div >
                <!-- Website Logo -->
                <a href="main.html"   >
                    <img src="images/taru.jpg"
                         style="height:60px;">
                </a>
                <span class="tag-line">塔里木大学</span>
            </div>


            <!-- Start of Main Navigation -->
            <nav class="main-nav">
                <div class="menu-top-menu-container">
                    <ul id="menu-top-menu" class="clearfix">
                        <li class="current-menu-item"><a href="main.html">Home</a></li>
                        <li><a href="#">科普模块</a>
                            <ul class="sub-menu">
                                <li><a @click="pes"  href="disease-list.html">虫害科普</a></li>
                                <li><a @click="pesCon" href="disease-list.html">虫害防治</a></li>
                                <li><a @click="dis" href="disease-list.html">病害科普</a></li>
                                <li><a @click="disCon" href="disease-list.html">病害防治</a></li>
                            </ul></li>
                        <li><a href="exchange-list.html">讨论模块</a></li>
                        <li><a href="forecast.html">数据预测</a></li>
                        <li><a href="#">用户信息</a>
                            <ul class="sub-menu">
                                <li><a href="selectUser.html">查看用户信息</a></li>
                                <li><a href="updateUser.html">修改用户信息</a></li>
                                <li><a href="updateUserPassword.html">修改用户密码</a></li>
                            </ul>
                        </li>
                        <li v-if="flag"><a href="#">管理员模块</a>
                            <ul class="sub-menu">
                                <li><a href="disease-list-statue.html">文章审核</a></li>

                            </ul>
                        </li>

                    </ul>
                </div>
            </nav>
            <!-- End of Main Navigation -->

        </div>

    </div>


    <!-- Start of Page Container -->
    <div class="page-container">
        <div class="container">
            <div class="row">

                <!-- start of page content -->
                <div class="span8 main-listing">
                    <div v-for="lists in list">
                        <div class="format-standard type-post hentry clearfix">
                            <header class="clearfix">
                                <h3  class="post-title" >
                                    <a @click="selectOne" :id="lists.diseaseId" href="disease-detail.html">{{lists.diseaseTitle}}</a>
                                </h3>
                                <div class="post-meta clearfix">
                                    <span class="date">{{lists.updateDate}}</span>
                                    <span class="category"><a href="#" title="View all posts in Advanced Techniques">{{lists.diseaseSort}}</a></span>
                                    <span class="comments"><a href="#" title="Comment on Using Javascript">{{lists.commentList.length}} 评论</a></span>

                                </div>
                            </header>
                        </div>
                    </div>





                    <article class="format-standard type-post hentry clearfix">
                        <!--<header class="clearfix">

                                <h3 class="post-title">
                                        <a href="single.html">Using Javascript</a>
                                </h3>

                                <div class="post-meta clearfix">
                                        <span class="date">25 Feb, 2013</span>
                                        <span class="category"><a href="#" title="View all posts in Advanced Techniques">Advanced Techniques</a></span>
                                        <span class="comments"><a href="#" title="Comment on Using Javascript">0 Comments</a></span>
                                        <span class="like-count">18</span>
                                </div>&lt;!&ndash; end of post meta &ndash;&gt;

                        </header>
-->

                    </article>




                    <div class="page-bar">

                        <ul>
                            <li v-if="showFirst"><a v-on:click="cur--,back()">上一页</a></li>
                            <li v-for="index in indexs"  v-bind:class="{ 'active': cur == index}">
                                <a v-on:click="btnClick(index)">{{ index }}</a>
                            </li>
                            <li v-if="showLast"><a v-on:click="cur++,next()" >下一页</a></li>
                            <li><a>共<i>{{all}}</i>页</a></li>
                        </ul>
                    </div>

                </div>
                <!-- end of page content -->


                <!-- start of sidebar -->
                <aside class="span4 page-sidebar">

                    <section class="widget">
                        <div class="support-widget">
                            <h3  class="title"><span v-model="userNickname" ><input style="border:none; background-color:transparent;"  readonly="readonly" v-model="userNickname"></span></h3>
                            <p class="intro"><div  v-model="userNickname" > 亲爱的用户欢迎您</div></p>
                        </div>
                    </section>


                    <section class="widget">
                        <h3 class="title">往期文章</h3>
                        <ul class="articles">
                            <li class="article-entry standard">
                                <h4><a href="single.html">枣树病虫害防治技术要点</a></h4>
                            </li>
                            <li class="article-entry standard">
                                <h4><a href="single.html">枣树病虫害防治：枣树的常见病虫害及防治方法简介</a></h4>
                            </li>
                            <li class="article-entry video">
                                <h4><a href="single.html">粘虫板在枣树虫害防治中的应用研究</a></h4>
                            </li>

                        </ul>
                    </section>
                </aside>
            </div>
        </div>
    </div>
    <!-- End of Page Container -->

    <a href="#top" id="scroll-top"></a>

    <!-- script -->
</div>
<script type='text/javascript' src='js/jquery-1.8.3.min.js'></script>
<script type='text/javascript' src='js/jquery.easing.1.34e44.js?ver=1.3'></script>
<script type='text/javascript' src='js/prettyphoto/jquery.prettyPhotoaeb9.js?ver=3.1.4'></script>
<script type='text/javascript' src='js/jquery.liveSearchd5f7.js?ver=2.0'></script>
<script type='text/javascript' src='js/jflickrfeed.js'></script>
<script type='text/javascript' src='js/jquery.formd471.js?ver=3.18'></script>
<script type='text/javascript' src='js/jquery.validate.minfc6b.js?ver=1.10.0'></script>
<script type='text/javascript' src='js/custom5152.js?ver=1.0'></script>
<script type="text/javascript" src="js/url.js"></script>
<script type="text/javascript" src="js/vue(1).js"></script>
<script type="text/javascript" src="js/axios.min.js"></script>
<script>
    var vue = new Vue({

        el: '#kuan', //挂载点
        data: {
            list: [],
            commentLenght:'',
            flag:false,
            userNickname:'',
            all: '', //总页数
            cur: 1,//当前页码

        },
        created: function() {
            this.selectLen();
            this.init();
            this.userOrAdmin();
        },
        methods: {

            btnClick: function(data){//页码点击事件
                var self = this;
                console.log("当前页码"+data)
                if(data != self.cur){
                    self.cur = data
                    var param=new URLSearchParams();
                    var diseaseTitle = window.sessionStorage.getItem("title");
                    self.userNickname = window.sessionStorage.getItem("userNickname");
                    param.append('diseaseTitle',diseaseTitle);
                    param.append('pageNum',self.cur);
                    param.append('pageSize',5);
                    axios
                        .post(web_server+"query/disease/tetle",param)
                        .then(function(response) {
                            //var object =JSON.stringify(response)
                            var objects= response.data;
                            if(objects.status == 200) {
                                var object = objects.data
                                self.list = "";
                                self.list= object;
                                window.location.href="#"
                                //self.list.size=self.commentLenght;
                                //console.log(self.list[0].commentList)
                            }

                        })
                        .catch(function(error) {
                            console.log(error)
                        });
                }
            },
            next: function(){
                var self = this;
                var param=new URLSearchParams();
                var diseaseTitle = window.sessionStorage.getItem("title");
                self.userNickname = window.sessionStorage.getItem("userNickname");
                param.append('diseaseTitle',diseaseTitle);
                param.append('pageNum',self.cur);
                param.append('pageSize',5);
                axios
                    .post(web_server+"query/disease/tetle",param)
                    .then(function(response) {
                        //var object =JSON.stringify(response)
                        var objects= response.data;
                        if(objects.status == 200) {
                            var object = objects.data
                            self.list = "";
                            self.list= object;
                            console.log(object)
                            window.location.href="#"
                            //self.list.size=self.commentLenght;
                            //console.log(self.list[0].commentList)
                        }

                    })
                    .catch(function(error) {
                        console.log(error)
                    });
            },
            back:function(){
                var self = this;
                var param=new URLSearchParams();
                var diseaseTitle = window.sessionStorage.getItem("title");
                self.userNickname = window.sessionStorage.getItem("userNickname");
                param.append('diseaseTitle',diseaseTitle);
                param.append('pageNum',self.cur);
                param.append('pageSize',5);
                axios
                    .post(web_server+"query/disease/tetle",param)
                    .then(function(response) {
                        //var object =JSON.stringify(response)
                        var objects= response.data;
                        if(objects.status == 200) {
                            var object = objects.data
                            self.list = "";
                            self.list= object;
                            console.log(object)
                            window.location.href="#"
                            //self.list.size=self.commentLenght;
                            //console.log(self.list[0].commentList)
                        }

                    })
                    .catch(function(error) {
                        console.log(error)
                    });
            },
            userOrAdmin: function(){
                var self = this;
                var userSort = window.sessionStorage.getItem("userSort");
                console.log(userSort)
                if(userSort == 2 ){
                    self.flag = true;
                }
            },
            init: function() {
                var self = this;
                var param=new URLSearchParams();
                var diseaseTitle = window.sessionStorage.getItem("title");
                self.userNickname = window.sessionStorage.getItem("userNickname");
                param.append('diseaseTitle',diseaseTitle);
                param.append('pageNum',self.cur);
                param.append('pageSize',5);
                axios
                    .post(web_server+"query/disease/tetle",param)
                    .then(function(response) {
                        //var object =JSON.stringify(response)
                        var objects= response.data;
                        if(objects.status == 200) {
                            var object = objects.data
                            self.list= object;
                            console.log(object)
                            //this.moun;
                            //self.list.size=self.commentLenght;
                            //console.log(self.list[0].commentList)
                        }

                    })
                    .catch(function(error) {
                        console.log(error)
                    });
            },
            selectLen: function() {
                var self = this;
                var param=new URLSearchParams();
                var diseaseTitle = window.sessionStorage.getItem("title");
                self.userNickname = window.sessionStorage.getItem("userNickname");
                param.append('diseaseTitle',diseaseTitle);
                axios
                    .post(web_server+"query/disease/tetle/len",param)
                    .then(function(response) {
                        var objects= response.data;
                        if(objects.status == 200) {
                            var object = objects.data
                            var length = object.length/5;
                            var len = Math.ceil(length)
                            self.all= len;
                            //this.moun;
                            //self.list.size=self.commentLenght;
                            //console.log(self.list[0].commentList)
                        }

                    })
                    .catch(function(error) {
                        console.log(error)
                    });
            },
            selectOne: function(e){
                var self = this;
                window.sessionStorage.setItem("articleId", e.target.id);
            },
            pes:function(){
                window.sessionStorage.setItem("sort", "1");
            },
            pesCon:function(){
                window.sessionStorage.setItem("sort", "2");
            },
            dis:function(){
                window.sessionStorage.setItem("sort", "3");
            },
            disCon:function(){
                window.sessionStorage.setItem("sort", "4");
            }
        },
        computed: {
            showLast: function(){
                if(this.cur == this.all){
                    return false
                }
                return true
            },
            showFirst: function(){
                if(this.cur == 1){
                    return false
                }
                return true
            },
            indexs: function(){
                var left = 1
                var right = this.all
                var ar = []
                if(this.all>= 11){
                    if(this.cur > 5 && this.cur < this.all-4){//大于6并且小于16
                        left = this.cur - 5
                        right = this.cur + 4
                    }else{
                        if(this.cur<=5){
                            left = 1
                            right = 10
                        }else{
                            right = this.all
                            left = this.all -9
                        }
                    }
                }
                while (left <= right){
                    ar.push(left)
                    left ++
                }
                return ar
            }

        }


    })

</script>

</body>
</html>
